<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    /**
     * 
     * 1. 通过插值表达式可以渲染style属性，增加的就是style行内样式
     * 2. style的值是一个对象
     * 3. 对于复合属性，要使用小驼峰命名法：
     *      font-size: fontSize
     *      background-color: backgroundColor
     * 4. 单位如果是px，可以直接写数字，省略单位
     * 
     */
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    const styles = {
        width:300,
        height:300,
        backgroundColor:'skyblue'
    }
    root.render((
        <>
            <div style={{width:'300px',height:'50px',backgroundColor:'red'}}>我是div</div>
            <div style={styles}>我是300的方块</div>
        </>
    ))

</script>

</html>